<template>
	<view class="main">
	<view class="top">
	
		<view class="img">
			<image src="@/static/myTop.png" mode="scaleToFill">
							
			</image>
		</view>
		<view class="text">
			个人中心
		</view>
	<view class="allName">
		<view class="head">
			<image src="@/static/ai.jpg"mode="scaleToFill"></image>
		</view>
		<text class="name">
		用户昵称
		</text>
	</view>
		
	</view>
	<view class="lists">
		<view class="list">
			<view class="listImg">
				<image src="@/static/person.png" mode="scaleToFill"></image>
			</view>
			<text class="people">个人资料</text>
			<view class="go" @click="goPerson">
				<image src="@/static/more.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="list">
			<view class="listImg">
				<image src="@/static/about.png" mode="scaleToFill"></image>
			</view>
			<text class="people" >关于我们</text>
			<view class="go" @click="goAbout">
				<image src="@/static/more.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="list">
			<view class="listImg">
				<image src="@/static/setting.png" mode="scaleToFill"></image>
			</view>
			<text class="people">设置</text>
			<view class="go" @click="goSetting">
				<image src="@/static/more.png" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goPerson(){
				console.log(1)
				uni.navigateTo({
				    url: '/pages/my/person/person'
				});
		},
		goAbout(){
			uni.navigateTo({
			    url: '/pages/my/about/about'
			});
		},
		goSetting(){
			uni.navigateTo({
			    url: '/pages/my/setting/setting'
			});
		}
	},
	}
</script>

<style lang="scss" scoped>
  page{
	  background-color: rgb(255, 255, 255);
	  width: 100%;
	  height: 100%;
  }
  .main{
	  width: 100%;
	  .top{
		  width: 100%;
		  position: relative;
		  .text{
			  width:146rpx;
			  height:50rpx;
			  font-size:36rpx;
			  font-weight:510;
			  color:rgb(51, 51, 51);
			position: absolute;
			top: 60rpx;
			left: 50%;
			margin-left: -73rpx;
			  opacity:1;
			  // background-color: green;
		  }
		  .img{
			  width: 100%;
			  height: 359rpx;
			  image{
				  width: 100%;
				  height: 359rpx;
			  }
		  }
		  .allName{
			  width: 100%;
			  height: 130rpx;
			  // background-color: red;
			  position: absolute;
			  top: 163rpx;
			  display: flex;
			  flex-direction: row;
			  .head{
			  			  width: 130rpx;
			  			  height: 130rpx;
			  			  // background-color: skyblue;
			  			  margin-left: 32rpx;
						  image{
							  width: 100%;
							  height: 100%;
							  border-radius: 50%;
						  }
			  }
			  .name{
			  			  width:188rpx;
			  			  height:45rpx;
			  			  font-size:32rpx;
			  			  font-family:PingFang SC;
			  			  font-weight:600;
			  			  line-height:130rpx;
			  			  color:rgba(51,51,51,1);
			  			  opacity:1;
						  margin-left: 32rpx;
			  }
		  }
		
	
	  }
	  .lists{
		  margin-top: 16rpx;
		  width: 100%;
		  height: 300rpx;
		  // background-color: blue;
		  .list{
			  width: 100%;
			  height: 100rpx;
			  display: flex;
			  border-bottom: 1px solid rgb(238, 238, 238);
			  line-height: 100rpx;
			  position: relative;
			  .listImg{
				  width: 34rpx;
				  height: 33rpx;
				  margin-left: 32rpx;
				  image{
					  width: 100%;
					  height: 100%;
				  }
			  }
			  .people{
				  width:190rpx;
				  height:45rpx;
				  font-size:32rpx;
				  font-family:PingFang SC;
				  font-weight:400;
				  color:rgba(51,51,51,1);
				  opacity:1;
				  margin-left: 26rpx;
			  }
			  .go{
				  width: 14rpx;
				  height: 26rpx;
				 position: absolute;
				 right: 32rpx;
				  image{
					  width: 100%;
					  height: 100%;
				  }
			  }
		  }
	  }
  }
  
</style>
